import React, { useEffect } from "react"
import * as echarts from 'echarts';
import china from "./china.json"
import style from './index.module.scss'
function ColumnModdle () {
  const points = [ // 散点图数据
    { name: '新疆', value: [87.628579, 43.793301], itemStyle: { color: '#00EEFF' } }, // 新疆
    { name: '四川', value: [104.076452, 30.651696], itemStyle: { color: '#00EEFF' } }, // 四川
    { name: '甘肃', value: [103.826777, 36.060634], itemStyle: { color: '#00EEFF' } }, // 甘肃
    { name: '云南', value: [102.709372, 25.046432], itemStyle: { color: '#00EEFF' } }, // 云南
    { name: '广西', value: [108.327537, 22.816659], itemStyle: { color: '#00EEFF' } }, // 广西
    { name: '湖南', value: [112.982951, 28.116007], itemStyle: { color: '#A6283F' } }, // 湖南
    { name: '山东', value: [117.020725, 36.670201], itemStyle: { color: '#00EEFF' } }, // 山东
    { name: '河南', value: [113.753094, 34.767052], itemStyle: { color: '#A6283F' } }, // 河南
    { name: '山西', value: [112.578781, 37.813948], itemStyle: { color: '#00EEFF' } }, // 山西
    { name: '福建', value: [119.296194, 26.101082], itemStyle: { color: '#00EEFF' } }, // 福建
    { name: '浙江', value: [120.152575, 30.266619], itemStyle: { color: '#A6283F' } }, // 浙江
    { name: '江苏', value: [118.763563, 32.061377], itemStyle: { color: '#00EEFF' } }, // 江苏
    { name: '北京', value: [116.407387, 39.904179], itemStyle: { color: '#A6283F' } }, // 北京
    { name: '陕西', value: [108.953939, 34.266611], itemStyle: { color: '#00EEFF' } }, // 陕西
    { name: '广东', value: [113.266887, 23.133306], itemStyle: { color: '#00EEFF' } } // 广东
  ]
  const linesData = [// 线条数据
    { coords: [[116.407387, 39.904179], [87.628579, 43.793301]] },// 北京->新疆
    { coords: [[113.266887, 23.133306], [104.076452, 30.651696]] },//广东->四川
    { coords: [[118.763563, 32.061377], [103.826777, 36.060634]] },// 江苏->甘肃
    { coords: [[103.826777, 36.060634], [102.709372, 25.046432]] },// 甘肃->云南
    { coords: [[116.407387, 39.904179], [108.327537, 22.816659]] },// 北京->广西
    { coords: [[108.327537, 22.816659], [112.982951, 28.116007]] },// 广西->湖南
    { coords: [[104.076452, 30.651696], [117.020725, 36.670201]] },// 四川->山东
    { coords: [[116.407387, 39.904179], [113.753094, 34.767052]] },// 北京->河南
    { coords: [[113.753094, 34.767052], [112.578781, 37.813948]] },// 河南->山西
    { coords: [[116.407387, 39.904179], [119.296194, 26.101082]] },// 北京->福建
    { coords: [[116.407387, 39.904179], [120.152575, 30.266619]] },// 北京->浙江
    { coords: [[120.152575, 30.266619], [118.763563, 32.061377]] },// 浙江->安徽
    { coords: [[87.628579, 43.793301], [113.266887, 23.133306]] },// 新疆->广东
    { coords: [[112.982951, 28.116007], [108.953939, 34.266611]] }// 湖南->陕西
  ]
  const planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
  useEffect(() => {
    var chartDom = document.getElementById('mainMap');
    var myChart = echarts.init(chartDom);
    const option = {
      geo: {// 地图配置
        map: 'china',
        label: { // 图形上的文本标签
          normal: {// 通常状态下的样式
            show: true,
            textStyle: {
              color: '#fff'
            }
          },
          emphasis: {// 鼠标放上去高亮的样式
            textStyle: {
              color: '#fff'
            }
          }
        },
        itemStyle: {// 地图区域的样式设置
          normal: { // 通常状态下的样式
            borderColor: '#5089EC',
            borderWidth: 1,
            areaColor: { //地图区域的颜色
              type: 'radial', // 径向渐变
              x: 0.5, // 圆心
              y: 0.5,// 圆心
              r: 0.8,// 半径
              colorStops: [
                { // 0% 处的颜色
                  offset: 0,
                  color: 'rgba(0, 102, 154, 0)'
                },
                { // 100% 处的颜色
                  offset: 1,
                  color: 'rgba(0, 102, 154, .4)'
                }
              ]
            }
          },
          // 鼠标放上去高亮的样式
          emphasis: {
            areaColor: '#2386AD',
            borderWidth: 0
          }
        }
      },
      series: [
        { // 散点系列数据
          type: 'effectScatter',// 带有涟漪特效动画的散点（气泡）图
          coordinateSystem: 'geo', //该系列使用的坐标系:地理坐标系
          // 特效类型,目前只支持涟漪特效'ripple'，意为“涟漪”
          effectType: 'ripple',
          // 配置何时显示特效。可选'render'和'emphasis' 。
          showEffectOn: 'render',
          rippleEffect: { // 涟漪特效相关配置。
            period: 10, // 动画的周期，秒数。
            scale: 4,// 动画中波纹的最大缩放比例。
            // 波纹的绘制方式，可选 'stroke' 和 'fill'。
            brushType: 'fill'
          },
          zlevel: 1, // 所有图形的 zlevel 值。
          data: points
        },
        { // 线条系列数据
          type: 'lines',
          zlevel: 2,
          symbol: ['none', 'arrow'], // 标记的图形: 箭头
          symbolSize: 10, // 标记的大小
          effect: { // 线条特效的配置
            show: true,
            period: 6, // 特效动画的时间，单位s
            trailLength: 0, // 特效尾迹的长度。取值[0,1]值越大，尾迹越重
            symbol: planePath, // 特效图形的标记 可选'circle'等
            symbolSize: 15// 特效标记的大小
          },
          lineStyle: { // 线条样式
            normal: {
              color: '#93EBF8',
              width: 2.5, // 线条宽度
              opacity: 0.6, // 尾迹线条透明度
              curveness: 0.2// 尾迹线条曲直度
            }
          },
          data: linesData
        }
      ]
    }
    // 地图注册，第一个参数的名字必须和option.geo.map一致
    echarts.registerMap('china', china)
    option && myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    let timer = setTimeout(() => {
      myChart.resize();
      clearTimeout(timer)
    }, 1000)
  })
  return (
    <div className={style.center}>
      {/* <!-- no模块制作 --> */}
      <div className={style.no}>
        <div className={style.noHd}>
          <ul>
            <li>125811</li>
            <li>100000</li>
          </ul>
        </div>
        <div className={style.noBd}>
          <ul>
            <li>前端需求人数</li>
            <li>市场供应人数</li>
          </ul>
        </div>
      </div>
      {/* <!-- 地图模块 --> */}
      <div className={style.map}>
        <div className={style.map1}></div>
        <div className={style.map2}></div>
        <div className={style.map3}></div>
        <div className={style.chart} id="mainMap"></div>
      </div>
    </div>
  )
}
export default ColumnModdle